<template>
    <div class="m-5">
        <t-transfer
                :data="demoData"
                :target-keys="targetKeys"
                :operations="['向左移动','向右移动']"
                :render-content="renderContent"
                filterable
                show-footer
                style="height: 500px;"
                @on-change="$_onTransferChange">
            <div slot="left-footer" style="margin: -10px 0">
                <t-button slot="left-footer" size="sm" @click="$_onRefreshButtonClick">刷新</t-button>
            </div>
            <div slot="right-footer" style="margin: -10px 0">
                <t-button size="sm" @click="$_onRefreshButtonClick">刷新</t-button>
            </div>
        </t-transfer>
    </div>
</template>
<script>
  export default {
    data() {
      return {
        demoData: this.getMockData(),
        targetKeys: this.getTargetKeys()
      }
    },
    methods: {
      getMockData: function() {
        let mockData = []
        for (let i = 0; i <= 20; i++) {
          mockData.push({
            key: i.toString(),
            label: '内容' + i,
            description: '内容' + i + '的描述信息',
            disabled: Math.random() * 3 < 1
          })
        }
        return mockData
      },
      getTargetKeys: function() {
        return this.getMockData()
          .filter(() => Math.random() * 2 > 1)
          .map(item => item.key)
      },
      $_onTransferChange(newTargetKeys, direction, moveKeys) {
        console.log(newTargetKeys)
        console.log(direction)
        console.log(moveKeys)
        this.targetKeys = newTargetKeys
      },
      $_onRefreshButtonClick: function() {
        this.demoData = this.getMockData()
        this.targetKeys = this.getTargetKeys()
      },
      renderContent: function(h, item) {
        return h('span', [
          h('label', {}, [
            h('t-icon', {
              props: {
                type: 'access-point'
              }
            }),
            item.label
          ]),
          h(
            't-button',
            {
              class: 'ml-1',
              props: {
                type: 'primary',
                size: 'sm'
              },
              style: {
                margin: '5px 0'
              },
              on: {
                click: () => {
                  this.show(item)
                }
              }
            },
            '查看'
          )
        ])
      },
      show: function(item) {
        this.$Modal.info({
          title: `key: ${item.key}`,
          content: `content: ${item.label}<br>description: ${item.description}`
        })
      }
    }
  }
</script>
